<template>
    <div class="play-list" v-if="sub.length > 0">
        <el-card>
            <div class="filter-item" v-for="item, index in datalist" :key="item">
                <div class="filter-title">{{ categories[index] }}</div>
                <div class="filter-box">
                    <span class="item-box" v-for="j in item" :key="j">
                        <el-link @click="router.push(`/playlist?cat=${j.name}`)">{{ j.name }}</el-link>
                    </span>
                </div>
            </div>
        </el-card>
        <div class="title">
            <h2>{{ cat }}</h2>
            <div class="hot"><span>热门</span></div>
        </div>

        <div class="wrapper" v-infinite-scroll="load">
            <SongListMove :playlists="playlists"></SongListMove>
            <Loading></Loading>
        </div>

    </div>
</template>

<script setup>
import { playlistCatlist, topPlaylist } from '@/api/playlist'
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import SongListMove from '@/components/playlist/SongListMove.vue'
import Loading from '@/components/Loading.vue'

const router = useRouter()
const route = useRoute()
const categories = ref({})//分类,0:语种,1:风格,2:场景,3:情感,4:主题
const sub = ref([])//子分类
const datalist = ref([])//歌单分类列表
const cat = ref('全部歌单')
const playlists = ref([])//歌单列表

onMounted(async () => {
    const res = await playlistCatlist()
    categories.value = res.categories
    sub.value = res.sub
    //把歌单分类列表按照分类进行分组
    //遍历categories,把每一项的name作为datalist的key,把每一项的sub作为datalist的value
    for (let i in categories.value) {
        datalist.value.push(sub.value.filter(item => item.category == i))
    }
    if (route.query.cat) {
        cat.value = route.query.cat
    }
    const res2 = await topPlaylist({ cat: cat.value, limit: 60 })
    playlists.value = res2.playlists

})
const load = async () => {
    const res = await topPlaylist({ cat: cat.value, limit: 60, offset: playlists.value.length })
    playlists.value = playlists.value.concat(res.playlists)
}
</script>

<style lang="less" scoped>
.play-list {
    padding: 20px 20px;

    .filter-item {
        display: flex;
        // align-items: center;
        font-size: 0;
        padding: 5px 0;

        .filter-title {
            display: inline-block;
            font-size: 14px;
            line-height: 14px;
            padding: 5px 20px 0 0;
            color: #505a68;
            font-weight: 300;
            cursor: pointer;
            border-right: 1px solid #eee;
        }

        .filter-box {
            flex: 1;
            display: flex;
            flex-wrap: wrap;

            .item-box {
                display: inline-block;
                width: 70px;
                font-size: 14px;
                line-height: 14px;
                height: 14px;
                margin: 5px 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                cursor: pointer;
                text-align: center;
            }
        }
    }

    .title {
        display: flex;
        justify-content: start;
        align-items: center;

        .hot {
            padding: 5px 40px;
            font-size: 14px;
            color: #141414;

            span {
                display: inline-block;
                border-bottom: 5px solid #409eff;
            }
        }
    }

    .wrapper {
        min-height: 320px;
        height: 400px;
    }
}
</style>